"use client"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

interface CategoryFilterProps {
    categories: { id: string | number; name: string }[]
    selectedId: string | number | null
    onChange: (id: string | number | null) => void
    className?: string
}

export function CategoryFilter({ categories = [], selectedId, onChange, className }: CategoryFilterProps) {
    // 确保 categories 是数组
    if (!Array.isArray(categories)) {
        console.error("CategoryFilter: categories is not an array", categories)
        return null
    }

    return (
        <div className={cn("flex flex-wrap gap-2", className)}>
            {categories.map((category) => (
                <Button
                    key={category.id}
                    variant={selectedId === category.id ? "default" : "outline"}
                    size="sm"
                    className={cn(
                        "rounded-full",
                        selectedId === category.id && "bg-primary text-primary-foreground hover:bg-primary/90",
                    )}
                    onClick={() => onChange(selectedId === category.id ? null : category.id)}
                >
                    {category.name}
                </Button>
            ))}
        </div>
    )
}

